@use "../../assets/scss/mixins/size" as mx;

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  background-color: #ff7f2e;
  font-family: "Concert One", cursive;
  overflow: hidden;
}

/*/////////////////// rules */
$color-black: #13242c;
$color-white: #fff;
$color-red-1: #d13433;
$color-red-2: #932422;
$color-skin-1: #eab08c;
$color-skin-2: #d9766c;
$color-skin-3: #b2524d;
$color-hair: #13242c;
$color-wood-1: #601513;
$color-wood-2: #410a09;

$bezier: cubic-bezier(0.55, 0.01, 0.16, 1.34);

.text {
  @include mx.centered;
  color: rgba($color-black, 0.1);
  font-size: 30em;
  text-align: center;
  top: 40%;
}

/// 脚指头
%finger {
  @include mx.circle(15, $color-skin-1);
  bottom: 0;
  transform-origin: bottom;
}

.container {
  @include mx.centered;
  @include mx.dimension(500, 300);
  @include mx.pseudo_after {
    @include mx.rect(350, 12, rgba($color-black, 0.1), 12px);
    left: 80px;
    bottom: 40px;
    z-index: -1;
    animation: shadow_animate 1.2s 0.1s infinite $bezier;
  }
  .caveman {
    position: absolute;
    @include mx.dimension(250, 300);
    .head {
      @include mx.rect(65, 140, $color-hair, 50px);
      @include mx.pos_tl(25px, 60px);
      animation: head-animate 1.2s infinite $bezier;
      @include mx.pseudo {
        @include mx.rect(7, 20, $color-black, 10px);
        top: -8px;
      }
      &::before {
        left: 30px;
        transform: rotate(-20deg);
      }
      &::after {
        left: 35px;
        transform: rotate(20deg);
      }
      .eye {
        @include mx.left50;
        @include mx.rect(48, 16, $color-skin-1, 50px);
        top: 40px;
        left: 45%;
        @include mx.pseudo {
          @include mx.circle(5, $color-black);
          @include mx.top50;
          animation: eye-animate 1.2s infinite $bezier;
        }
        &::before {
          right: 9px;
        }
        &::after {
          left: 9px;
        }
        .nose {
          @include mx.centered;
          @include mx.rect(15, 35, $color-skin-2, 10px);
          top: 12px;
          left: 45%;
          border-left: 8px solid rgba($color-black, 0.1);
        }
      }
    }
    .shape {
      @include mx.left50;
      overflow: hidden;
      @include mx.cir(140);
      top: 70px;
      .circle {
        position: absolute;
        @include mx.cir(60);
        @include mx.pseudo {
          @include mx.cir(20);
        }
        &::before {
          left: 50px;
          top: 45px;
        }
        &::after {
          left: 50px;
          top: 10px;
        }
        &:nth-child(1) {
          left: -12px;
          top: 80px;
        }
        &:nth-child(2) {
          right: 10px;
          top: 0;
          transform: rotate(90deg);
          &::after {
            left: 65px;
            top: 10px;
          }
          &::before {
            display: none;
          }
        }
      }
    }
    &:nth-child(1) {
      right: 20px;
      .shape {
        background-color: $color-red-1;
        .circle {
          background-color: $color-red-2;
          &::after,
          &::before {
            background-color: $color-red-2;
          }
        }
      }
      .head {
        animation-delay: 0.6s;
        .eye {
          &::after,
          &::before {
            animation-delay: 0.6s;
          }
        }
      }
    }
    &:nth-child(2) {
      left: 20px;
      transform: rotateY(180deg);
      .shape {
        background-color: $color-red-2;
        .circle {
          background-color: $color-red-1;
          &::after,
          &::before {
            background-color: $color-red-1;
          }
        }
      }
      .arm-right {
        animation-delay: 0.6s;
      }
    }
    .arm-right {
      z-index: 1;
      @include mx.pos_tl(80px, 135px);
      @include mx.rect(60, 180, $color-skin-1, 50px);
      transform-origin: 30px 30px;
      border-left: 8px solid rgba($color-black, 0.1);
      animation: arm-animate 1.2s infinite $bezier;
      .club {
        border-bottom: 110px solid $color-wood-1;
        border-inline: 10px solid transparent;
        width: 40px;
        @include mx.pos_tl(120px, -60px);
        transform: rotate(70deg);
        @include mx.pseudo {
          z-index: 2;
          border-radius: 50%;
          background-color: $color-wood-1;
        }
        &::after {
          top: -10px;
          @include mx.dimension(20, 20);
        }
        &::before {
          top: 90px;
          margin-left: -50%;
          @include mx.dimension(40, 40);
        }
      }
    }
    .leg {
      position: absolute;
      top: 200px;
      @include mx.rect(10, 55, null, 10px);
      @include mx.pseudo_after {
        @include mx.cir(10);
        left: -5px;
        top: 15px;
      }
      .foot {
        @include mx.pos_tl(30px, -38px);
        @include mx.rect(30, 25, null, 25px 25px 0 0);
        @include mx.pseudo {
          @extend %finger;
        }
        &::after {
          left: -6px;
        }
        &::before {
          left: 8px;
          transform: scale(0.6);
        }
        .fingers {
          position: absolute;
          left: 15px;
          transform: scale(0.6);
          @extend %finger;
          @include mx.pseudo_after {
            left: 11px;
            @extend %finger;
          }
        }
      }
      &:nth-of-type(1) {
        left: 95px;
        background-color: $color-skin-3;
        &::after {
          background-color: $color-skin-3;
        }
        .foot {
          background-color: $color-skin-3;
          &::after {
            background-color: $color-skin-3;
          }
          &::before {
            display: none;
          }
        }
      }
      &:nth-of-type(2) {
        left: 115px;
        background-color: $color-skin-2;
        &::after {
          background-color: $color-skin-2;
        }
        .foot {
          background-color: $color-skin-2;
        }
      }
    }
  }
}

.link {
  position: absolute;
  bottom: 200px;
  opacity: 0.2;
  display: flex;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.5s;
  cursor: pointer;
  &:hover {
    opacity: 1;
  }
  span {
    font-size: 35px;
    margin: 0;
    margin-left: 5px;
  }
}

@keyframes arm-animate {
  to {
    transform: rotate(-1turn);
  }
}
@keyframes head-animate {
  0%,
  42%,
  100% {
    top: 25px;
  }
  45% {
    top: 50px;
  }
}
@keyframes eye-animate {
  0%,
  42%,
  100% {
    height: 5px;
  }
  45% {
    height: 1px;
  }
}
@keyframes shadow_animate {
  0%,
  50%,
  100% {
    width: 350px;
    left: 80px;
  }
  25% {
    width: 450px;
    left: 80px;
  }
  75% {
    width: 450px;
    left: 0px;
  }
}
